<template>
  <div class="bigbox">
    <!-- 左侧扫码下载app -->
    <div class="left">
      <div class="leftsaoma">
        <p class="openApp">打开漫画台APP—我的—扫一扫<img src="../img/wenhao.png" alt="" @mouseenter="enter1" @mouseleave="leave1"></p>
        <div v-show="flag" class="appsao"></div>
        <img src="../img/erweima.jpg" alt="" class="erweima" />
        <img src="../img/logo.png" alt="" class="logo" />
      </div>
    </div>
    <div class="inputbox">
      <span class="text">账号：</span>
      <input type="text" v-model="changeinput1" placeholder="请输入电话或邮箱"/><br />
      <span class="text">密码：</span>
      <input type="password" v-model="changeinput2" placeholder="请输入密码" ref="password" v-show="!showpass"/>
      <input type="text" v-model="changeinput2" placeholder="请输入密码" ref="password" v-show="showpass"/>
      <span @click="showpass=!showpass" class="eyespan">
        <span v-show="showpass"><img src="../img/openEye.png"></span>
	     <span v-show="!showpass"><img src="../img/closeEye.png"></span>
      </span>
      
      <br />
      <span class="text">验证码：</span>
      <input type="text" v-model="changeinput3" placeholder="请输入验证码"/>
      <span class="verifytext" ref="yanzhengma" @click="getverfy"></span> <br />
      <div class="verifyerr" ref="verifyerr"></div>
      <button class="denglubtn" @click="loginbtn">登录</button
      ><!-- 点击发起网络请求查询数据库中是否有 -->
    </div>
    <div class="buttombox">
      <p class="other">其他登录方式</p>
      <div class="buttomboxson2">
        <div class="tupian">
          <a href="#"><img src="../img/QQ.png" alt=""/></a>  
          <a href="#"><img src="../img/weixin.png" alt="" /></a>
          <a href="#"><img src="../img/weibo.png" alt="" /></a>                 
        </div>
        <p class="text1">
          使用以上任意登录方式登录均代表您已阅读并同意本APP
          <span class="xieyi">《用户协议》</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag:false,
      showpass:false,
      password:"",
      changeinput1: "",
      changeinput2: "",
      changeinput3: "",
    };
  },
  methods: {
    /*  */
    enter1(){
      this.flag=true;
    },
leave1(){
  this.flag=false;
},
    /* 获取验证码 */
    async getverfy() { 
      var res = await this.$axios("/verify1");
      this.$refs.yanzhengma.innerHTML = res.data;
    },
    /* 获取账号密码 */
    async loginbtn() {
      this.password=this.$refs.password.currentValue 
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      var reg1 = /^\w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/;
      if (
        reg1.test(this.changeinput1) == true ||
        reg.test(this.changeinput1) == true
      ) {
        console.log("账号通过");
        //验证码 校验
        /******** 发起网络请求 查找用户信息 传递参数 检查密码是否正确  设置登录缓存状态********/ 
        var res1 = await this.$axios.post("/verify", {
          zhanghao: this.changeinput1,
          mima: this.changeinput2,
          verifytext: this.changeinput3,
        }); 
        console.log(res1.data.res1);
        if (res1.status == 200) {
          console.log("网络请求成功");
          this.$refs.verifyerr.innerHTML=res1.data.verify
          if (res1.data.res1) {
            if (this.changeinput2 == res1.data.res1[0].password) {
              console.log("登录成功"); 
              alert("登录成功")
              window.localStorage.setItem("user", `{isLogin:true,userid:${res1.data.res1[0].uid}}`);
            /*   window.location.reload(); */
              /* 隐藏模态 */
            } else {
              this.$refs.verifyerr.innerHTML=res1.data.verify+",账号或密码错误"
            }
          }
        }
      } else {
        alert("账号格式错误");
      }
    },
  },
  computed: {},
  mounted() {
    /*   */
    this.getverfy();
  },
};
</script>
<style scoped>
.bigbox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.bigbox .left {
  width: 50%;
/*    background-color: rgb(230, 13, 13); */
  position: relative;
}
/* 左边二维码盒子 */
.leftsaoma {
  width: 80%;
  height: 300px;
  background-image: url(../img/saomabg.png);
  background-size: 300px 300px;
  background-repeat: no-repeat;
  /* background-color: rgb(18, 224, 45); */
  position: absolute;
  right: 0;
  top: 0;
}
.appsao{
  width: 200px;
  height: 300px;
  background-image: url('../img/appsao.png');
  background-size: cover;
  position: absolute;
  left: 270px;
  top:-20px;
}
.openApp img{
  vertical-align: middle;
}
.openApp{
 position: absolute;
  left: 32px;
  top: 65px;
  z-index: 12;
}
.leftsaoma .erweima {
  width: 44%;
  height: 170px;
  position: absolute;
  left: 59px;
  top: 98px;
}
.leftsaoma .logo {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 126px;
  top: 160px;
}
/* 右边input盒子 */
.inputbox {
  width: 50%;
  height: 300px;
  text-align: left;
  /* background-color: rgb(252, 167, 167); */
}
.inputbox input {
  width: 300px;
  height: 40px;
  margin-top: 25px;
  outline: none;
  border-radius: 5px;
  border: 1px solid gray;
}
.inputbox .text {
  display: inline-block;
  width: 60px;
  height: 40px;
  text-align: right;
  font-size: 14px;
}
.eyespan{
   vertical-align: middle;
   margin-left: -40px;
}
.verifyerr{
  color: red;
  width: 400px;
  text-align: center;
}
.verifytext {
  width: 100px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
}
/* 登录按钮 */
.denglubtn {
  width: 300px;
  height: 37px;
  background-image: url("../img/login-btn.png");
  background-size: contain;
  margin-top: 34px;
  margin-left:64px;
  border-radius: 20px;
  border: 0;
  color: white;
  font-size: 18px;
}
/* 底部盒子 */
.buttombox {
  width: 100%;
  margin: 20px auto;
  position: relative;
}
.buttombox .text1 {
  color: #b6b6b6;
  font-size: 12px;
  margin-top: 20px;
}
.buttombox .xieyi {
  color: #2cafef;
  font-size: 12px;
}
.other::before {
  content: "";
  position: absolute;
  left: 50px;
  top: 10px;
  width: 400px;
  height: 2px;
  background: #ddd;
}
.other::after {
  content: "";
  position: absolute;
  right: 50px;
  top: 10px;
  width: 400px;
  height: 2px;
  background: #ddd;
}
.buttomboxson2 .tupian {
  margin-top: 20px;
}
/* 三张小图qq 微信 微博 */
.tupian img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
</style>